<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>分布式缓冲区</title>
        <script src="./static/libs/include-mapboxgl-local.js"></script>
        <style>
            #map {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            .mapboxgl-popup {
                max-width: fit-content !important;
            }
            .table-popup-wrapper {
                width: fit-content;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <script> 
            mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
            var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
            var vecsrc = {
                //来源类型为栅格瓦片
                type: 'raster',
                tiles: [
                    //来源请求地址，请求天地图提供的全球矢量地图WMTS服务
                    'http://t' +
                        Math.round(Math.random() * 7) +
                        '.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
                        '&TILECOL=' +
                        '{x}' +
                        '&TILEROW=' +
                        '{y}' +
                        '&TILEMATRIX=' +
                        '{z}' +
                        '&tk=' +
                        tiandituKey
                ],
                //栅格瓦片的分辨率
                tileSize: 256
            };
            var cvasrc = {
                //来源类型为栅格瓦片
                type: 'raster',
                tiles: [
                    //来源请求地址，请求天地图提供的全球矢量中文注记WMTS服务
                    'http://t' +
                        Math.round(Math.random() * 7) +
                        '.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
                        '&TILECOL=' +
                        '{x}' +
                        '&TILEROW=' +
                        '{y}' +
                        '&TILEMATRIX=' +
                        '{z}' +
                        '&tk=' +
                        tiandituKey
                ],
                //栅格瓦片的分辨率
                tileSize: 256
            };
            var popup = new mapboxgl.Popup({ closeOnClick: false });
            var map = new mapboxgl.Map({
                container: 'map',
                crs: 'EPSG:4326', //经纬度一定要设置crs参数
                maxBounds: [
                    [-180, -90],
                    [180, 90]
                ],
                style: {
                    //设置版本号，一定要设置
                    version: 8,
                    //添加来源
                    sources: {
                        vecsrc: vecsrc,
                        cvasrc: cvasrc
                    },
                    //设置加载并显示来源的图层信息
                    layers: [
                        {
                            //图层id，要保证唯一性
                            id: 'vecsrc',
                            //图层类型
                            type: 'raster',
                            //连接图层来源
                            source: 'vecsrc',
                            //图层最小缩放级数
                            minzoom: 0,
                            //图层最大缩放级数
                            maxzoom: 22
                        },
                        {
                            //图层id，要保证唯一性
                            id: 'cvasrc',
                            //图层类型
                            type: 'raster',
                            //连接图层来源
                            source: 'cvasrc',
                            //图层最小缩放级数
                            minzoom: 0,
                            //图层最大缩放级数
                            maxzoom: 22
                        }
                    ]
                },
                zoom: 10,
                pitch: 45,
                center: [121.4693, 31.12307]
            });
            
            var vm = this;

            map.on('load', () => {
                vm.query();
            });

            function query() {
                const url =
                    'http://192.168.96.101:9091/pgsql/vectortileservice_dzy?' +
                    'libName=bigdata03&srvName=bigdata03.mpf26126&version=1' +
                    '&TileMatrix={z}&TileRow={y}&TileCol={x}&keepField=lat';
                /* var param = {
                    networkProtocol: 'http',
                    ip: '192.168.96.101',
                    port: 9091,
                    path: 'bigdata03/bigdata03/', // 这里的最后一个mpf24091是mapgis平台中的图层名',
                    version: '1.0',
                    tileMatrix: '{z}',
                    tileRow: '{y}',
                    tileCol: '{x}'
                };

                var vectortile = new Zondy.DataStore.PostGIS.PostgisVectorTileService(param);
                var url = vectortile.getWmtsUrl(); */
                var sourceId = 'query-source';
                var layerId = 'select_layer';

                map.addSource(sourceId, {
                    type: 'vector',
                    tiles: [url],
                    mapgisOffset: 1
                });
                map.addLayer({
                    id: layerId,
                    type: 'circle',
                    source: sourceId,
                    'source-layer': 'bigdata03.mpf26126',
                    paint: {
                        'circle-radius': 12,
                        'circle-color': '#B42222',
                        'circle-stroke-width': 3,
                        'circle-stroke-color': '#ffffff'
                    },
                    filter: ['==', '$type', 'Point']
                });
            }
        </script>
    </body>
</html>
